<template>
  <div class="video-player">
    <div class="task-bar">
      <div class="bar-inner">
        <span class="pl20">完美播放器</span>
        <system-child-btn />
      </div>
    </div>
    <div class="video" @dblclick.stop>
      <video
        v-if="currentVideo"
        ref="videoDom"
        :src="currentVideo"
        :class="{ full: isFullVideo }"
        @click.stop="handlePlayVideo"
        @dblclick="handleDBClick"
        @canplay="init"
        @timeupdate="handleTimeUpdate"
        @pause="videoData.isPlay = false"
        @playing="videoData.isPlay = true"
        @ended="currentVideo = ''"
      />
      <div class="no-video" v-else>
        <img src="@/assets/images/app/videoPlayer.png" alt="videoPlayer" />
        <div class="open" @click.stop="handleOpenFile">打开文件</div>
      </div>
    </div>
    <div class="progress-bar" @mousedown.stop @dblclick.stop>
      <div class="progress" ref="progressDom" @click.stop="handleClick">
        <div class="progress-line" :style="{ width: `${dragVideoInfo.width}px` }">
          <div class="progress-line-dot" :class="{ active: dragVideoInfo.start }" @mousedown.stop="handleMousedown" />
        </div>
      </div>
      <div class="volume">
        <voice-icon class="voice-icon" :volume="videoData.volume" :muted="videoData.muted" />
        <div class="voice" ref="voiceDom" @click.stop="handleVoiceClick">
          <div class="voice-line" :style="{ width: `${dragVoiceInfo.width}px` }">
            <div
              class="voice-line-dot"
              :class="{ active: dragVoiceInfo.start }"
              @mousedown.stop="handleVoiceMousedown"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="controls" @dblclick.stop>
      <span @mousedown.stop @click.stop="handlePlayVideo">
        <i class="iconfont" :class="[videoData.isPlay ? 'wos-pause' : 'wos-play']" />
      </span>
      <span @mousedown.stop @click.stop="handleStopVideo">
        <i class="iconfont wos-stop" />
      </span>
      <span @mousedown.stop>
        <i class="iconfont wos-perv-play" />
      </span>
      <span @mousedown.stop>
        <i class="iconfont wos-next-play" />
      </span>
      <em class="pl10"> {{ $timeFormat(videoData.currentDuration) }} / {{ $timeFormat(videoData.duration) }} </em>
    </div>
  </div>
</template>

<script setup lang="ts">
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import VoiceIcon from '@/components/taskBar/voiceIcon.vue'
import { nextTick, reactive, ref, inject } from 'vue'
import { readFile, selectFile } from '@/utils/utils'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import { useDragHook } from '@/hooks'

const appId = inject<string>('appId') || ''
const taskId = inject<string>('taskId') || ''

const runningTasksStore = useRunningTasksStore()
const systemSettingStore = useSystemSettingStore()

const videoDom = ref<HTMLVideoElement>()
const isFullVideo = ref<boolean>(false)
const currentVideo = ref<string>(new URL('@/assets/video/introduce.webm', import.meta.url).href)
const videoData = reactive({ currentDuration: 0, duration: 0, isPlay: false, volume: 50, oldVolume: 50, muted: false })

const {
  dragDom: progressDom,
  dragInfo: dragVideoInfo,
  handleClick,
  handleMousedown
} = useDragHook({
  default: { disX: 8 },
  click(ev: MouseEvent, proportion) {
    if (!videoDom.value) return
    videoDom.value.currentTime = proportion.proportionX * videoDom.value.duration
  },
  up(ev: MouseEvent, proportion) {
    if (!videoDom.value) return
    videoDom.value.currentTime = proportion.proportionX * videoDom.value.duration
  }
})
const {
  dragDom: voiceDom,
  dragInfo: dragVoiceInfo,
  handleClick: handleVoiceClick,
  handleMousedown: handleVoiceMousedown
} = useDragHook({
  default: { width: 40, disX: 8 },
  click(ev: MouseEvent, proportion) {
    if (!videoDom.value) return
    videoDom.value.volume = proportion.proportionX * (systemSettingStore.$state.systemVolume / 100)
  },
  move(ev, proportion) {
    if (!videoDom.value) return
    videoDom.value.volume = proportion.proportionX * (systemSettingStore.$state.systemVolume / 100)
  }
})

const init = () => {
  if (!videoDom.value) return
  videoData.currentDuration = Math.ceil(videoDom.value?.currentTime)
  videoData.duration = Math.ceil(videoDom.value?.duration)
}

// 打开文件
const handleOpenFile = async () => {
  const files = await selectFile({ accept: '.mp4, .webm' })
  currentVideo.value = await readFile(files[0], 'toBase64')
  await nextTick()
  videoDom.value && videoDom.value?.play()
  init()
}

// 全屏播放
const handleDBClick = () => {
  if (!videoDom.value) return
  const find = runningTasksStore.findTask(appId, taskId)
  runningTasksStore.setTaskPatch(appId, taskId, {
    isFull: !find?.isFull
  })
  isFullVideo.value = !find?.isFull
}

// 播放 / 暂停
const handlePlayVideo = () => {
  videoData.isPlay ? videoDom.value?.pause() : videoDom.value?.play()
}

// 停止
const handleStopVideo = () => {
  currentVideo.value = ''
  videoData.currentDuration = 0
  dragVideoInfo.width = 0
  videoData.currentDuration = 0
  videoData.duration = 0
}

const handleTimeUpdate = () => {
  if (!progressDom.value || !videoDom.value) return
  if (!dragVideoInfo.start) {
    const { width } = progressDom.value.getBoundingClientRect()
    dragVideoInfo.width = (videoDom.value.currentTime / videoDom.value.duration) * width
    videoData.currentDuration = Math.ceil(videoDom.value?.currentTime)
    videoData.duration = Math.ceil(videoDom.value?.duration)
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

.video-player {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  display: flex;
  flex-direction: column;

  .task-bar {
    color: #fff;
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: relative;

    .bar-inner {
      width: 100%;
      height: 100%;
      background-color: rgb(30, 30, 30);

      ::v-deep(span) {
        width: 26px;

        i {
          transform-origin: center center;
          transform: scale(0.6);
        }
      }
    }
  }

  .video {
    width: 100%;
    height: calc(100% - 40px - 22px - 30px);
    color: #fff;

    video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background-color: #000;

      &.full {
        position: fixed;
        z-index: calc($z-index-window-lock + 1);
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
      }
    }

    .no-video {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
        object-fit: contain;
      }

      .open {
        margin-top: 20px;
        padding: 5px 20px;
        border: 2px solid rgb(30, 30, 30);
      }
    }
  }

  .progress-bar {
    padding: 0 10px;
    box-sizing: border-box;
    height: 22px;
    background-color: rgb(30, 30, 30);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .progress {
      width: calc(100% - 120px);
      height: 3px;
      background-color: rgb(68, 68, 68);
      position: relative;

      &:hover .progress-line .progress-line-dot {
        background-color: rgb(250, 225, 0);
      }

      .progress-line {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background-color: rgb(250, 225, 0);

        .progress-line-dot {
          position: absolute;
          z-index: 10;
          right: 0;
          top: 50%;
          transform: translateX(100%) translateY(-50%);
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #fff;

          &.active {
            background-color: rgb(250, 225, 0);
          }
        }
      }
    }

    .volume {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .voice-icon {
        width: 12px;
        height: 12px;
      }

      .voice {
        width: calc(100% - 20px);
        height: 2px;
        background-color: #000;
        position: relative;

        .voice-line {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          background-color: rgb(250, 225, 0);

          .voice-line-dot {
            position: absolute;
            z-index: 10;
            right: 0;
            top: 50%;
            transform: translateX(100%) translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #fff;

            &.active {
              background-color: rgb(250, 225, 0);
            }
          }
        }
      }
    }
  }

  .controls {
    color: #fff;
    display: flex;
    align-items: center;
    height: 40px;
    background-color: rgb(30, 30, 30);

    > span {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;

      &:hover {
        background-color: rgb(39, 39, 39);
      }

      i {
        font-size: 12px;
        transform: scale(0.78);
        transform-origin: center center;
      }
    }
  }
}
</style>
